<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*p:before{*/
    /*    content: 'Hello';*/
    /*    color: red;*/
    /*}*/
    /*p:after{*/
    /*    content: 'Tom';*/
    /*    color: red;*/
    /*}*/
    .demo:after{
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-left: 8px solid #AFABAB;
        position: relative;
        top: 2px;
        left: 10px;
    }

    .left,.right{
        min-height: 40px;
        position: relative;
        display: table;
        text-align: center;
        border-radius: 7px;
        background-color: #9EEA6A;
    }
    .right{      /*使左右的对话框分开*/
        top: 40px;
        left: 60px;
    }
    .left > p,.right > p{    /*使内容居中*/
        display: table-cell;
        vertical-align: middle;
        padding: 0 10px;
    }
    .left:before,.right:after{   /*用伪类写出小三角形*/
        content: '';
        display: block;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        position: absolute;
        top: 11px;
    }
    /*分别给左右两边的小三角形定位*/
    .left:before{
        border-right: 8px solid #9EEA6A;
        left: -16px;
    }
    .right:after{
        border-left: 8px solid #9EEA6A;
        right: -16px;
    }
</style>
<body>
    <p>你好</p>
    <div class="demo">这是一个测试</div>
    <div class="left">
        <p>吃了吗</p>
    </div>
    <div class="right">
        <p>吃过了，吃了红烧排骨和酸菜鱼</p>
    </div>
</body>
</html>